<template>
    <div class="contaier">
        <van-nav-bar title="30天减肥饮食计划" left-text="" @click-left="onClickLeft" left-arrow sticky>
            <template #right>
                <img src="../../assets/分享.png" alt="" style="width: 30px;height: 30px;">
            </template>
        </van-nav-bar>
        <div>
            <div class="cultiavtion">
                <div class="cult-img">
                    <img src="../../assets/img/养成10.png" alt="" />
                </div>
                <van-tabs v-model:active="active" class="act" sticky>
                    <van-tab title="介绍">
                        <div class="cult">
                            <div class="cult-box">
                                <div class="cult-left" style="margin-top: 10px;"> <span
                                        style="color: #39d167;margin-left: 10px;">•</span> 难度系数:
                                </div>
                                <div class="cult-right" style="margin-top: 10px;">
                                    &nbsp; &nbsp;<van-icon name="star"
                                        style="color:#ffa800 !important;; z-index: 99999 " />
                                    <van-icon name="star" style="color:#ffa800 !important;; z-index: 99999 " />
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left">
                                    <span style="color: #39d167;margin-left: 10px;">•</span> 适用人群:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 轻、中度肥胖，饮食习惯不良者
                                </div>
                            </div>

                            <div class="cult-box">
                                <div class="cult-left"> <span style="color: #39d167;margin-left: 10px;">•</span>
                                    预期效果:
                                </div>
                                <div class="cult-right">
                                    &nbsp; &nbsp; 减脂2-3斤
                                </div>
                            </div>
                            <div style="border-top: 1px solid #f4f4f4;margin-top: 10px;width: 90%;">
                                <div style="margin-top: 10px;">
                                    <p style="padding-right: 1px;font-size: 15.5px;">
                                        很多人在问怎么才能快速减肥，节食、吃减肥药以及各
                                    </p>
                                    <p style="padding-right: 5px;font-size: 16px;margin-top: 5px">
                                        种偏方都是浮云！
                                       </p>
                                    <p style="margin-top: 5px">事实上,绝大部分所谓的速效减肥方法都是不健康的，</p>
                                    <p style="margin-top: 5px">并且减下去的体重非常容易反弹。</p>
                                    <p style="margin-top: 5px">怎么才能持续呢？</p>
                                    <p style="margin-top: 5px">渐进式的减肥效果才更健康更持久。</p>
                                    <p style="margin-top: 5px">如果你想在短期内减掉合理的体重（比如一周减掉约</p>
                                    <p style="margin-top: 5px">1~2斤），除了适量运动，必须要调整饮食和生活方</p>
                                    <p style="margin-top: 5px">式。</p>
                                    <p style="margin-top: 5px">本方案会通过每天的小任务帮你进行饮食调节,也帮助</p>
                                    <p style="margin-top: 5px">你形成正确的减肥和饮食观念。</p>
                                    <p style="margin-top: 5px">按照本计划调整每天饮食,你将学会科学、健康、可持</p>
                                    <p style="margin-top: 5px">续的减肥方法，从今天开始越吃越瘦！</p>
                                    <p style="margin-top: 5px">友情提示：搭配【30天减肥运动计划】会有意想不到</p>
                                    <p style="margin-top: 5px">的减肥效果呦！</p>
                                </div>
                            </div>
                            <div class="center" style="position: relative;">
                                <h3 style="font-weight: 550;">分享评论</h3>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/poss.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">爱是含笑饮砒霜°</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-16 14:22</span>
                                    </div>
                                </div>
                                <div class="bottom">
                                    <p style="padding-left: 67px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天减肥饮食计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       挺好的挺好的</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/blue.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">135****0212</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-15 9:03</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天减肥饮食计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                      坚持科学饮食减肥，节食什么的不健康，支持春雨的</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       科学减肥计划，赞</p>
                                </div>
                                <div class="top" style="position: absolute;">
                                    <div class="top_item" style="position: absolute;">
                                        <img src="../../assets/dogface.jpg" alt=""
                                            style="width: 40px;height: 40px;margin-left: 10px;border-radius: 50%;" />
                                        <span
                                            style="margin-top: -40px;display:flex;margin-left: 70px;font-weight: 700;">二胎准妈妈</span>
                                        <span style="margin-top: 1px;display:flex;margin-left: 70px;font-size: 12px;
                                          color: #a0a0a0;">3-12 19:32</span>
                                    </div>
                                </div>
                                <div class="bottom1">
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                        完成了<span style="color: #58d980;">#30天减肥饮食计划#</span>全部任务</p>
                                    <p style="padding-left: 67px;font-size: 16px;margin-top: 5px;font-size: 14px;">
                                       讲的挺好的啊，感觉以前好多观念都被纠正了</p>
                                </div>
                            </div>

                        </div>
                    </van-tab>
                    <van-tab title="目录">
                        <div class="day">
                            <div class="day1"><b>共30日</b></div>
                            <div class="day2">
                                <ul>
                                    <li>01日</li>
                                    <li class="hj" style="margin-left: -200px;">今天吃主食了吗？</li>
                                </ul>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>02日</li>
                                        <li class="hj" style="margin-left: -150px;">宁吃鸡鸭鱼，不吃牛羊猪</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -10PX;">

                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>03日</li>
                                        <li class="hj" style="margin-left: -200px;">喂，不能吃夜宵</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 0.5px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">

                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>04日</li>
                                        <li class="hj" style="margin-left: -100px;">吃主食这事儿你不会忘记了吧？</li>
                                    </ul>
                                    <div
                                        style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                    </div>
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>05日</li>
                                        <li class="hj" style="margin-left: -200px;">主食要吃粗粮啊！</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>

                                        <li>06日</li>
                                        <li class="hj" style="margin-left: -180px;">蒸的煮的才是减肥餐</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                <div style="margin-top: 15px;">
                                    <ul>
                                        <li>07日</li>
                                        <li class="hj" style="margin-left: -161px;">在11点-13点把午饭吃完</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>08日</li>
                                        <li class="hj" style="margin-left: -160px;">在7~9点之间把早餐吃完</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>09日</li>
                                        <li class="hj" style="margin-left: -181px;">边看电视边吃饭？ No</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>10日</li>
                                        <li class="hj" style="margin-left: -190px;">嘿，早饭来个鸡蛋？</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>11日</li>
                                        <li class="hj" style="margin-left: -140px;">在7~热量再低也得控制总量</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>12日</li>
                                        <li class="hj" style="margin-left: -260px;">水果得生吃</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>13日</li>
                                        <li class="hj" style="margin-left: -230px;">先吃素菜再喝汤</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>14日</li>
                                        <li class="hj" style="margin-left: -180px;">吃的太清淡？来把坚果</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>15日</li>
                                        <li class="hj" style="margin-left: -220px;">来杯低脂或脱脂奶</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>16日</li>
                                        <li class="hj" style="margin-left: -280px;">来点鱼虾</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>17日</li>
                                        <li class="hj" style="margin-left: -250px;">午饭搭配着吃</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>18日</li>
                                        <li class="hj" style="margin-left: -210px;">把餐具换成小一号的</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>19日</li>
                                        <li class="hj" style="margin-left: -270px;">三餐变五餐</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>20日</li>
                                        <li class="hj" style="margin-left: -290px;">吃点糙的</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>21日</li>
                                        <li class="hj" style="margin-left: -210px;">没事多瞅瞅食物成分</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>22日</li>
                                        <li class="hj" style="margin-left: -240px;">常吃红黄绿黑白</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                         
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>23日</li>
                                        <li class="hj" style="margin-left: -230px;">感觉饿了那就吃点</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>

                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>24日</li>
                                        <li class="hj" style="margin-left: -260px;">吃个七八分饱</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>25日</li>
                                        <li class="hj" style="margin-left: -260px;">豆腐也要吃点</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>26日</li>
                                        <li class="hj" style="margin-left: -270px;">禽兽去皮吃</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>27日</li>
                                        <li class="hj" style="margin-left: -240px;">盛饭时手要抖抖</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>

                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>28日</li>
                                        <li class="hj" style="margin-left: -230px;">要清汤不要大浓汤</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                  <div style="margin-top: 15px;">
                                    <ul>
                                        <li>29日</li>
                                        <li class="hj" style="margin-left: -200px;">要蒸着，不要红烧干煸</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                                 <div style="margin-top: 15px;">
                                    <ul>
                                        <li>30日</li>
                                        <li class="hj" style="margin-left: -200px;">带饭主食要以粗粮为主</li>
                                    </ul>
                                </div>
                                <div
                                    style=" border-bottom: 1px solid #f5f5f5;width: 95%;margin-left: -25px;margin-top: -17PX;">
                                </div>
                            </div>
                        </div>
                    </van-tab>

                </van-tabs>
            </div>

        </div>
    </div>
    <div style="width: 95%;height: 100px;background-color: white;position: fixed;bottom: 0;left: 7px;">
        <button style="width: 98%;height: 50px;background-color:#39d167;margin-top: 42px;border: none;
        outline: none;color: white;position: absolute;left: 5px;border-bottom: 0px;">加入计划</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const active = ref(0);
const onClickLeft = () => {
    router.push({ path: "/jiankang" })
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #000 !important
}

.cultiavtion {
    position: relative;
    width: 100%;
    height: 1350px;
    overflow: hidden;

    .cult-img {
        width: 100%;
        height: 150px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cult {
        .cult-box {
            width: 120%;
            height: 42px;
        }

        .cult-left {
            float: left;
            height: 40px;
            text-align: center;
            padding-top: 10px;
        }

        .cult-right {
            float: left;
            height: 40px;
            width: 70%;
            text-align: left;
            padding-top: 10px;
        }
    }
}

[data-v-ca42e025] .van-icon {
    color: #ffa800 !important;
}

:deep(.van-tabs__line) {
    position: absolute;
    bottom: 15px;
    left: 0;
    z-index: 1;
    background: #39d167;
    border-radius: var(--van-tabs-bottom-bar-height);
}

.day {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    margin-left: 15px;

    .day1 {
        width: 100%;
        height: 30px;
        font-size: 19px;
        margin-left: 1px;
    }

    .day2 {
        width: 100%;
        height: 400px;
        margin-top: 15px;
        overflow-y: scroll;

        ul {
            height: 50px;
            display: flex;
            justify-items: center;

            li {
                color: #a7a7a7;
                margin-left: 1px;
            }

            .hj {
                margin-left: -150px;
            }
        }
    }
}

.center {
    h3 {
        margin-top: 60px;
        margin-left: 10px;
        margin-bottom: 25px;
    }

    .top {
        position: absolute;
        width: 100%;
        height: 50px;

        .top_item {
            // background-color: red;
            position: absolute;
            width: 100%;
            height: 50px;
        }

        // background-color: red;
    }

    .bottom {
        margin-top: 75px;
        width: 100%;
        height: 60px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom1 {
        margin-top: 40px;
        width: 100%;
        height: 90px;
        border-bottom: 1px solid #f4f4f4;
    }

    .bottom2 {
        // margin-top: 75px;
        width: 100%;
        height: 120px;
        // background-color: gray;
        border-bottom: 1px solid #f4f4f4;
    }
}
</style>